<template>
  <div>
    <a-row>
      <div style="float: right" class="margin-bottom-xs">
        <a-button type="primary" @click="foundationUpdate">保存</a-button>
      </div>
    </a-row>
    <div style="overflow: auto;height: calc(100vh - 320px);">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入用户姓名" v-decorator="[
                    'userName',
                    {
                      rules: [
                        {
                          required: true,
                          min: 1,
                          message: '请输入用户姓名！',
                        },
                      ],
                    },
                  ]" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="用户昵称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入用户昵称" v-decorator="['nickName']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="用户性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-dict-select-tag type="select" dictCode="UserSex" placeholder="请选择用户性别"  v-decorator="['userSex', {
                    rules: [
                      {
                        required: true,
                        message: '请选择用户性别！',
                      },
                    ],
                  }]" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="用户年龄" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number style="width: 100%;" placeholder="请选择用户年龄" :min="0" :max="200"
                    v-decorator="['userAge']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="电子邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入电子邮箱" v-decorator="[
                    'userEmail',
                    {
                      rules: [
                        {
                          required: false,
                          pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                          message: '请输入正确的邮箱！',
                        },
                      ],
                    },
                  ]" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="用户生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-date style="width:100%;" v-decorator="['userBirthday']" placeholder="请选择用户生日">
                  </t-date>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="民族" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-dict-select-tag type="select" dictCode="UserNameFamily" placeholder="请选择民族" v-decorator="['userFamilyName']" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="籍贯" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-dict-select-tag type="select" dictCode="UserNameFamily" placeholder="请选择籍贯" v-decorator="['userNativePlace']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="办公号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['userTelephone']" placeholder="请输入办公号码" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入手机号码" v-decorator="[
                    'userCellphone',
                    {
                      rules: [
                        {
                          pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                          maxLength: 11,
                          message: '请输入正确的手机号码！',
                        },
                      ],
                    },
                  ]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="政治面貌" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-dict-select-tag type="select" dictCode="UserPoliticalOutlook" placeholder="请选择政治面貌" v-decorator="['politicalOutlook']" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="文化程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <t-dict-select-tag type="select" dictCode="UserEducation" placeholder="请选择文化程度" v-decorator="['userEducation']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入身份证号码" v-decorator="[
                    'idCard', {
                      rules: [{
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        maxLength: 11,
                        message: '请输入正确的身份证号码！'
                      }]
                    }
                  ]" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="银行开户行" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['depositBank']" placeholder="请输入银行开户行" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['bankAccounts']" placeholder="请输入银行账号" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="个性签名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['userPersonalSignature']" placeholder="请输入个性签名"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="24">
                <a-form-item label="备注" :labelCol="{ xs: { span: 24, }, sm: { span: 2, } }"
                  :wrapperCol="{ xs: { span: 24, }, sm: { span: 22, } }">
                  <a-textarea placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 5 }" v-decorator="['userRemark']" />
                </a-form-item>
              </a-col>
            </a-row>

          </a-row>

          <a-form-item class="hiddenItem">
            <a-input v-decorator="['uuid']" disabled type="hidden" />
          </a-form-item>
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['userNameId']" disabled type="hidden" />
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import pick from "lodash.pick";
import TreeSelect from "@/components/TopVUI/custom/TreeSelect";
import {
  TDictSelectTag
} from "@/components";
// 表单字段
const fields = [
  "uuid",
  "userName",
  "userNameId",
  "nickName",
  "userSex",
  "userAge",
  "userEmail",
  "userRemark",
  "userBirthday",
  "userPersonalSignature",
  "userFamilyName",
  "userNativePlace",
  "userTelephone",
  "userCellphone",
  "politicalOutlook",
  "userEducation",
  "idCard",
  "depositBank",
  "bankAccounts"
];
export default {
  props: {
    loading: {
      type: Boolean,
      default: () => false,
    },
    userInfos: {
      type: Object,
      default: () => null,
    },
  },
  components: {
    TreeSelect,
    TDictSelectTag
  },
  data() {
    return {
      title: "用户信息",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 19,
        },
      },
      form: this.$form.createForm(this),
    };
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    this.userInfos && this.form.setFieldsValue(pick(this.userInfos, fields));
  },
  methods: {
    foundationUpdate(){
      this.form.validateFields((errors, values) => {
        if(!errors){
          this.$post("/mdata/user/foundationUpdate",values).then(res => {
            if(res.statusCode === 200){
              this.$message.success(res.message, 1.5)
            }else{
              this.$message.error(res.message, 1.5)
            }
          })
        }
      })
    }
  },
};
</script>
